<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>商品编辑-商品列表</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <link rel="stylesheet" href="/css/cp.css"/>
    <style>
        .sp-tree {
            display: none;
            position: absolute;
            z-index: 199999999;
            width: 300px;
            height: 100px;
            padding: 10px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #d3d3d3;
        }

        .sp-tree li {
            position: relative;
            font-size: 12px;
            line-height: 20px;
            padding-left: 20px
        }

        .sp-tree li li {
            border-left: 1px solid #ccc;
        }

        .sp-tree li h3 {
            font-weight: normal;
            cursor: pointer;
        }

        .sp-tree li h3 b {
        }

        .sp-tree li h3 b:hover {
            text-decoration: underline;
        }

        .sp-tree li i {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 16px;
            font-weight: bold;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .sp-tree li ul {
            display: none;
        }
    </style>
    <!-- start cp-wrapper -->
    <div class="cp-wrapper">

        <form id="uploadForm">
            
            <input type="hidden" name="id" th:value="${goods.id}"/>
            <div class="cp-hash" id="xsxx"><h3 th:text="${goods.getName()+'('+goods.getNumber()+')规格设置'}">商品规格设置</h3></div>

            <table class="layui-table">
                <colgroup>
                  <col width="100">
                  <col width="150">
                  <col width="150">
                  <col width="150">
                  <col width="150">
                  <col width="150">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th>图片</th>
                    <th>SKU编码</th>
                    <th>颜色</th>
                    <th>尺码</th>
                    <th>款式</th>
                    <th>采购价</th>
                    <th></th>
                  </tr> 
                </thead>
                <tbody>
                  <tr th:each="item:${goodsSpec}">
                    <td>
                        <img th:src="${item.image}" width="50px" height="50px" />
                    </td>
                    <td th:text="${item.specNumber}">贤心</td>
                    <td th:text="${item.colorValue}">贤心</td>
                    <td th:text="${item.sizeValue}">贤心</td>
                    <td th:text="${item.styleValue}">贤心</td>
                    <td th:text="${item.purPrice}">贤心</td>
                    <td></td>
                  </tr>
                 
                </tbody>
              </table>

            <div class="cp-input">
                <span>商品编码：</span><input type="text" name="number" placeholder="请输入商品编码" th:value="${goods.number}" readonly autocomplete="off">
            </div>
            <!-- 销售信息 规格 start -->
            <div class="cp-product">
                <div class="sp-box">
                    <h3>颜色</h3>
                    <ul class="sp-guige" id="sp-color">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="color-select">添加颜色规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>尺码</h3>
                    <ul class="sp-guige" id="sp-size">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="size-select">添加尺码规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>规格</h3>
                    <table class="sp-standard">
                        <thead id="sp-thead"></thead>
                        <tbody id="sp-tbody"></tbody>
                    </table>

                </div>
            </div>
            <div class="cp-button">
                <button type="button" id="submit_btn">保存</button>
            </div>
        </form>


        <script type="text/javascript" src="/js/guige.js"></script>

    </div>
    <!-- end cp-wrapper -->
    <script>

        function addImage(file) {
            var fd = new FileReader();
            var img = file.previousSibling;
            var imgInput = file.nextSibling;
            fd.readAsDataURL(file.files[0]);
            fd.onload = function (e) {
                img.src = this.result;
                img.style.display = 'block';
                $.ajax({
                    url: "/ajax/upload_image_base64",
                    type: "POST",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify({image: this.result}),
                    // processData: false,
                    // contentType: false,
                    // cache: false,
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 0) {
                            imgInput.value = res.data;
                        } else {
                            alert(res.msg);
                        }

                    }
                })
            };
        }

        $(function () {
            $("#submit_btn").click(function () {

                var returnResult = true;
                //规格编码
                $("input[name^='spec_code']").each(function (i, el) {
                    var specNumber = $(this).val();
                    if (specNumber == "") {
                        alert("请填写规格编码");
                        $(this).focus();
                        returnResult = false;
                        return false;
                    }
                });


                if (returnResult == false) return false;

                var fd = new FormData($('#uploadForm')[0]);
                $.ajax({
                    url: "/ajax_goods/goods_add2_spec",
                    type: "POST",
                    dataType: "JSON",
                    data: $('#uploadForm').serialize(),
                    success: function (res) {
                        if (res.code == 0) {
                            window.location.href = "/goods/list?flag=" + res.data;
                        } else {
                            alert(res.msg);
                        }
                        return false;
                    }
                });
                return false;
            })
        })
    </script>
</div>
</body>
</html>
